<template>
  <div style="height: 60px;margin: 0 auto;font-size: 30px">
    <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        style="justify-content: center"
        active-text-color="red"
        @select="handleSelect"
    >
      <el-menu-item index="1">正在热映</el-menu-item>
      <el-menu-item index="2">即将上映</el-menu-item>
      <el-menu-item index="3">经典影片</el-menu-item>
    </el-menu>
  </div>

  <div style="width: 1200px;margin:0 auto;border: 1px solid white;margin-top: 30px">
    <div class="lx">
      <div class="container">
        <p>类&nbsp;&nbsp;型: </p>
        <ul>
          <li><a href="#" class="link">全部</a></li>
          <li><a href="#" class="link">爱情</a></li>
          <li><a href="#" class="link">喜剧</a></li>
          <li><a href="#" class="link">动画</a></li>
          <li><a href="#" class="link">剧情</a></li>
          <li><a href="#" class="link">恐怖</a></li>
          <li><a href="#" class="link">惊悚</a></li>
          <li><a href="#" class="link">科幻</a></li>
          <li><a href="#" class="link">动作</a></li>
          <li><a href="#" class="link">悬疑</a></li>
          <li><a href="#" class="link">犯罪</a></li>
          <li><a href="#" class="link">冒险</a></li>
          <li><a href="#" class="link">战争</a></li>
          <li><a href="#" class="link">奇幻</a></li>
          <li><a href="#" class="link">运动</a></li>
          <li><a href="#" class="link">家庭</a></li>
          <li><a href="#" class="link">古装</a></li>
          <li><a href="#" class="link">武侠</a></li>
          <li><a href="#" class="link">西部</a></li>
          <li><a href="#" class="link">历史</a></li>
          <li><a href="#" class="link">传记</a></li>
          <li><a href="#" class="link">歌舞</a></li>
          <li><a href="#" class="link">黑色电影</a></li>
          <li><a href="#" class="link">短片</a></li>
          <li><a href="#" class="link">纪录片</a></li>
          <li><a href="#" class="link">戏曲</a></li>
          <li><a href="#" class="link">音乐</a></li>
          <li><a href="#" class="link">灾难</a></li>
          <li><a href="#" class="link">青春</a></li>
          <li><a href="#" class="link">儿童</a></li>
          <li><a href="#" class="link">其他</a></li>
        </ul>
      </div>
    </div>

    <div class="lx">
      <div class="container">
        <p>区&nbsp;&nbsp;域: </p>
        <ul>
          <li><a href="#" class="link">全部</a></li>
          <li><a href="#" class="link">大陆</a></li>
          <li><a href="#" class="link">美国</a></li>
          <li><a href="#" class="link">韩国</a></li>
          <li><a href="#" class="link">日本</a></li>
          <li><a href="#" class="link">中国香港</a></li>
          <li><a href="#" class="link">中国澳门</a></li>
          <li><a href="#" class="link">中国台湾</a></li>
          <li><a href="#" class="link">泰国</a></li>
          <li><a href="#" class="link">印度</a></li>
          <li><a href="#" class="link">法国</a></li>
          <li><a href="#" class="link">英国</a></li>
          <li><a href="#" class="link">俄罗斯</a></li>
          <li><a href="#" class="link">意大利</a></li>
          <li><a href="#" class="link">西班牙</a></li>
          <li><a href="#" class="link">德国</a></li>
          <li><a href="#" class="link">波兰</a></li>
          <li><a href="#" class="link">澳大利亚</a></li>
          <li><a href="#" class="link">伊朗</a></li>
          <li><a href="#" class="link">其他</a></li>
        </ul>
      </div>
    </div>

    <div class="lx">
      <div class="container">
        <p>年&nbsp;&nbsp;代: </p>
        <ul>
          <li><a href="#" class="link">2029</a></li>
          <li><a href="#" class="link">2028</a></li>
          <li><a href="#" class="link">2027</a></li>
          <li><a href="#" class="link">2026</a></li>
          <li><a href="#" class="link">2025</a></li>
          <li><a href="#" class="link">2024</a></li>
          <li><a href="#" class="link">2023</a></li>
          <li><a href="#" class="link">2022</a></li>
          <li><a href="#" class="link">2021</a></li>
          <li><a href="#" class="link">2020</a></li>
          <li><a href="#" class="link">2019</a></li>
          <li><a href="#" class="link">2018</a></li>
          <li><a href="#" class="link">2017</a></li>
          <li><a href="#" class="link">2016</a></li>
          <li><a href="#" class="link">2015</a></li>
          <li><a href="#" class="link">2014</a></li>
          <li><a href="#" class="link">2013</a></li>
          <li><a href="#" class="link">2012</a></li>
          <li><a href="#" class="link">2011</a></li>
          <li><a href="#" class="link">2000-2010</a></li>
          <li><a href="#" class="link">90年代</a></li>
          <li><a href="#" class="link">80年代</a></li>
          <li><a href="#" class="link">70年代</a></li>
          <li><a href="#" class="link">更早</a></li>
          <li><a href="#" class="link">其他</a></li>
        </ul>
      </div>
    </div>
</div>


  <div>
    <div class="radio">
      <el-radio-group v-model="radio" >
        <el-radio :label="3">
          <router-link to="/popular" style="text-decoration: none">
            按热门排序
          </router-link>
        </el-radio>

        <el-radio :label="6" >
          <router-link to="/time" style="text-decoration: none">
            按时间排序
          </router-link>
        </el-radio>
        <el-radio :label="9">
          <router-link to="/review" style="text-decoration: none">
            按评价排序
          </router-link>
        </el-radio>
      </el-radio-group>
    </div>
    <div>
      <router-view/>
    </div>
  </div>

</template>

<script setup>
import { ref } from 'vue'

const radio = ref(3)
</script>

<style scoped>
.container{
  display: flex;
  align-items: center;
  padding: 0;
}
.container p{
  margin-right: 20px;
  padding-left: 20px;
  margin-bottom: 65px;
}

.lx ul {
  list-style: none; /* 去除默认的列表样式 */
  margin: 0;
  padding: 0;
}

.lx li {
  display: inline-block; /* 设置为行内块元素，使其水平排列 */
  padding: 5px 10px; /* 设置li元素的内边距 */
  background-color: #eee; /* 设置背景色 */
  border-radius: 10px; /* 设置圆角 */
  margin: 4px 10px;
  transition: all 0.3s;
}

.link {
  color: #000;
  text-decoration: none;
  transition: color 0.3s;
}

.lx li:hover,
.lx li:focus {
  background-color: #f00;
}

.lx li:hover a,
.lx li:focus a {
  color: #fff;
}

.radio{
  width: 1200px;
  margin: 20px auto;
}


</style>